<template>
  <div class="book-box">
    <load :show="show" />
    <div
      class="book"
      ref="wrapper"
      @click="setRead($event)"
      :style="{color:fontColor,background:background}"
    >
      <div v-show="pagingPattern===0" class="books-con">
        <div
          class="book-content"
          ref="content"
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="10"
          infinite-scroll-immediate-check="false"
        >
          <h1
            class="book-title"
            :style="'font-size:'+fontSize*1.2+'px;font-family:'+fontFamily"
          >{{bookContent.title}}</h1>
          <div
            class="book-inner"
            v-html="bookContent.content"
            :style="'font-size:'+fontSize+'px;font-family:'+fontFamily"
          ></div>
        </div>
      </div>
      <div class="bootPage" @click="setBootPage" v-if="bootPage===0">
        <div class="b-item bootPage-left">
          <div class="center">
            <i class="fa fa-angle-left"></i>
            <span>点击左侧翻页</span>
          </div>
        </div>
        <div class="b-item bootPage-center">
          <div class="center" style="text-align: center">呼出菜单</div>
        </div>
        <div class="b-item bootPage-right">
          <div class="center" style="text-align: right">
            <span>点击右侧翻页</span>
            <i class="fa fa-angle-right"></i>
          </div>
        </div>
      </div>
      <v-touch @swipeleft="handleToLeft" @swiperight="handleToRight">
        <div class="read-content" v-show="pagingPattern===1">
          <p
            class="book-title"
            style="padding: 10px;font-size:12px;"
          >{{bookContent.name}} {{bookContent.title}}</p>
          <div class="read-article">
            <section class="read-section" :style="styleObject">
              <div
                class="read-section-inner"
                :style="{columns:clWidth-20+'px',columnGap:10+'px'}"
                ref="bookInner"
                id="bookInner"
              >
                <h1
                  class="book-title"
                  :style="'font-size:'+fontSize*1.2+'px;font-family:'+fontFamily"
                >{{bookContent.title}}</h1>
                <div
                  class="book-inner"
<<<<<<< HEAD
                  :style="'font-size:'+fontSize+'px;font-family:'+fontFamily"
                  v-html="bookChaptersBody(bookContent.content)"
=======
                  :style="{fontSize:fontSize+'px'}"
                  v-html="bookContent.content"
>>>>>>> 9e77b3e0a594db1f1ce742d2274e1653dfc76e00
                ></div>
              </div>
            </section>
          </div>
          <p class="article-page">{{currentPaging + '/' + resultPaging}}</p>
        </div>
      </v-touch>
    </div>
    <div class="page-read-option" :class="{'show-panel':option}" @click="setReadShow">
      <div class="top-controll-bar">
        <van-nav-bar
          left-text="返回"
          :title="bookContent.name"
          :right-text="flag ? '撤出书架' : '加入书架'"
          left-arrow
          @click-left="handleBackTo"
          @click-right="handleAddBookShelf"
        />
      </div>
      <van-popup
        :value="option"
        position="bottom"
        :overlay="false"
        :style="{ height: '18%',padding:'20px 20px 0 20px' }"
      >
        <div class="chapter-change">
          <span @click="prevChapter">上一章</span>
          <van-slider
            v-model="chapterPer"
            @input="handleInputChapterIndex"
            button-size="14"
            min="0"
          />
          <span @click="nextChapter">下一章</span>
        </div>
        <van-grid square icon-size="20">
          <van-grid-item icon="wap-nav" text="目录" @click.stop="setList" />
          <van-grid-item icon="share" text="分享" />
          <van-grid-item
            :icon="play?'play-circle':'pause-circle'"
            text="自动"
            @click.stop="setAutoRead(play)"
          />
          <van-grid-item icon="setting" text="设置" @click.stop="setSetting" />
        </van-grid>
      </van-popup>
      <div
        class="current-chapter"
        v-show="currentChapter.title"
        @click="handleToChapter(currentChapter.book_id,currentChapter.id)"
      >
        <span>{{currentChapter.title}}</span>
        <van-icon name="arrow" />
      </div>
    </div>
    <van-popup
      v-model="listOption"
      position="left"
      :style="{ width: '80%', height: '100%' }"
      @click.stop="setList"
    >
      <div class="chapter-list">
        <div class="list-content">
          <div class="top-bar">
            <p>{{bookInfo.name}} 共{{chapterCount}}章</p>
          </div>
          <div class="chapter-con">
            <div ref="chapterList" class="chapterList">
              <div
                v-for="(item,index) in chapterList"
                @click="selectChapter(item.id,item.book_id)"
                :class="{'current':bookCurrentPage===item.id}"
                :key="index"
              >{{item.title}}</div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup
      v-model="setOption"
      position="bottom"
      :style="{ width: '100%'}"
      @click.prevent="setSetting"
    >
      <div class="readSet">
        <div class="readSet-item">
          <span @click.stop="fontSet('reduce',$event)">Aa-</span>
          <span>{{(fontSize*5).toFixed(0)}}</span>
          <span @click.stop="fontSet('add',$event)">Aa+</span>
        </div>
        <div class="readSet-item pattern">
          <span
            class="pattern-item"
            v-for="(item, index) in pattern"
            :class="{active:readePattern===index}"
            @click.prevent="setPattern(item,index)"
            :key="index"
            :style="'background:'+item.background"
          ></span>
        </div>
        <div class="readSet-item">
          <span
            v-for="(item, index) in fontFamilyList"
            @click.prevent="setFontFamily(item, index)"
            :key="index"
            :class="{active:item===fontFamily}"
          >{{item}}</span>
        </div>
        <div class="readSet-item">
          <span @click.prevent="setPaging(0)" :class="{active:pagingPattern===0}">上下滑动</span>
          <span @click.prevent="setPaging(1)" :class="{active:pagingPattern===1}">左右滑动</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { getCurrentInstance } from "@tarojs/taro";
import infiniteScroll from "vue-infinite-scroll";
import { getRead } from "@api/read";
import { getChapterDetail, getChapterList } from "@api/chapter";
import Load from "@components/Load";
export default {
  name: "Read",
  components: { Load },
  directives: { infiniteScroll },
  data() {
    return {
      bookContent: {
        title: "",
        content: ""
      },
      nextContent: {
        title: "",
        content: ""
      },
      prevContent: {
        title: "",
        content: ""
      },
      bookCurrentPage: 0,
      option: false,
      chapterList: [],
      chapterCount: 0,
      listOption: false,
      setOption: false,
      flag: false,
      bookInfo: {},
      pattern: [
        {
          item: "默认",
          color: "#5c5d58",
          background: "#eee6dd"
        },
        {
          item: "夜间",
          color: "#666",
          background: "#000"
        },
        {
          item: "护眼",
          color: "#5c5d58",
          background: "#c8e8c8"
        },
        {
          item: "少女粉",
          color: "#5c5d58",
          background: "#ffc0cb",
        },
        {
          item: "玫瑰棕",
          color: "#5c5d58",
          background: "#bc8f8f",
        },
      ],
      fontFamilyList: ["默认", "宋体", "楷体", "黑体"],
      offsetX: 0,
      margin: 10,
      currentPaging: 1,
      resultPaging: 1,
      styleObject: "",
      isClickPage: false,
      fontSize: 18,
      fontFamily: "默认",
      fontColor: "#5c5d58",
      background: "#eee6dd",
      readePattern: 0,
      pagingPattern: 0,
      bootPage: 0,
      clWidth:
        document.documentElement.clientWidth || document.body.clientWidth,
      loading: false,
      show: true,
      readTimeStart: 0,
      readTimeEnd: 0,
      chapterPer: 0,
      currentChapter: {},
      play: true,
      autoRead: "",
    };
  },
  watch: {
    bookContent(newVal, oldVla) {
      this.$refs.wrapper.scrollTop = 0;
      if (this.pagingPattern === 1) {
        this.$nextTick(function() {
          let scrollW = this.$refs.bookInner.scrollWidth;
          let clientW = this.$refs.bookInner.clientWidth;
          this.resultPaging = Math.floor(scrollW / clientW);
          if (this.isClickPage) {
            this.currentPaging = this.resultPaging;
            this.offsetX =
              -(this.currentPaging - 1) * (this.clWidth - this.margin);
            this.styleObject = {
              transform: "translateX(" + this.offsetX + "px" + ")",
              transitionDuration: "0s"
            };
          }
        });
      }
    }
  },
  created() {
    this.init();
    this.getNewUser();
    this.getUserLocalStorage();
    this.readTimeStart = this.getNowTime();
  },
  beforeDestroy() {
    this.setBookInfoStorage(true);
    this.readTimeEnd = this.getNowTime();
    this.$notify({
      message: `你本次阅读了${parseInt(
        new Date(this.readTimeEnd) - new Date(this.readTimeStart)
      ) / 1000}秒`,
      type: "success"
    });
    this.setReadTimeStorage();
  },
  methods: {
    async init() {
      const { id, chapter_id } = getCurrentInstance().router.params;
      await this.getReadContent(id, chapter_id);
      await this.getBookInfo(id);
      await this.getChapterList(id);
      this.setBookShelfStorage();
      this.setBookInfoStorage();
      this.handleGetBookShelf();
    },
    handleToRight() {
      if (this.pagingPattern === 0) {
        this.option = !this.option;
        return;
      }
      if (this.bookContent.last_chapterId == 0 && this.currentPaging === 1) {
        Taro.showToast({ title: "已经是第一章了!", icon: "none" });
        return;
      }
      if (this.currentPaging === 1) {
        //当前页为第一页的时候
        this.show = true;
        this.isClickPage = true;
        this.prevChapter();
      } else {
        //当前页为其他页面的时候
        this.currentPaging--;
        this.offsetX += this.clWidth - this.margin;
        this.styleObject = {
          transform: "translateX(" + this.offsetX + "px" + ")",
          transitionDuration: "0.5s"
        };
      }
    },
    handleToLeft() {
      if (this.pagingPattern === 0) {
        this.option = !this.option;
        return;
      }
      this.isClickPage = false;
      if (this.bookContent.next_chapterId == 0) {
        Taro.showToast({ title: "已经是最后一章了!", icon: "none" });
        return;
      }
      //翻页
      this.currentPaging++;
      // if (this.resultPaging - this.currentPaging === 2) {
      //   //当前页为总页数的倒数第二页的时候加载下一章
      //   this.nextChapter();
      // }
      if (this.currentPaging === this.resultPaging + 1) {
        //当前页等于总页数的时候
        this.show = true;
        this.styleObject = "";
        this.offsetX = 0;
        this.nextChapter();
        this.currentPaging = 1;
      } else {
        //当前页不等于总页数的时候
        this.offsetX -= this.clWidth - this.margin;
        this.styleObject = {
          transform: "translateX(" + this.offsetX + "px" + ")",
          transitionDuration: "0.5s"
        };
      }
    },
    // 获取当前时间
    getNowTime() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      let t1 = [year, month, day].join("/");
      let t2 = [hour, minute, second].join(":");
      return `${t1} ${t2}`;
    },
    // 设置书本信息缓存
    setBookInfoStorage(lastRead = false) {
      let bookList = Taro.getStorageSync("bookList");
      if (bookList) {
        let _bookList = JSON.parse(bookList);
        if (_bookList[this.bookContent.id]) {
          let firstReadTime = _bookList[this.bookContent.id].firstReadTime
            ? _bookList[this.bookContent.id].firstReadTime
            : this.getNowTime();
          _bookList[this.bookContent.id] = {
            index: this.bookContent.index,
            name: this.bookContent.name,
            type: this.bookInfo.type,
            writer: this.bookInfo.writer,
            is_over: this.bookInfo.is_over,
            intro:this.bookInfo.intro,
            firstReadTime,
            lastReadTime: lastRead
              ? _bookList[this.bookContent.id].lastReadTime
<<<<<<< HEAD
              : this.getNowTime()
=======
              : this.getNowTime(),
            image:this.bookInfo.image
>>>>>>> 9e77b3e0a594db1f1ce742d2274e1653dfc76e00
          };
          Taro.setStorageSync("bookList", JSON.stringify(_bookList));
        } else {
          _bookList[this.bookContent.id] = {
            index: this.bookContent.index,
            name: this.bookContent.name,
            type: this.bookInfo.type,
            writer: this.bookInfo.writer,
            is_over: this.bookInfo.is_over,
            intro:this.bookInfo.intro,
            firstReadTime: this.getNowTime(),
<<<<<<< HEAD
            lastReadTime: this.getNowTime()
=======
            lastReadTime: this.getNowTime(),
            image:this.bookInfo.image
>>>>>>> 9e77b3e0a594db1f1ce742d2274e1653dfc76e00
          };
          Taro.setStorageSync("bookList", JSON.stringify(_bookList));
        }
      } else {
        let bookList = {};
        bookList[this.bookContent.id] = {
          index: this.bookContent.index,
          name: this.bookContent.name,
          type: this.bookInfo.type,
          writer: this.bookInfo.writer,
          is_over: this.bookInfo.is_over,
          intro:this.bookInfo.intro,
          firstReadTime: this.getNowTime(),
<<<<<<< HEAD
          lastReadTime: this.getNowTime()
=======
          lastReadTime: this.getNowTime(),
          image:this.bookInfo.image
>>>>>>> 9e77b3e0a594db1f1ce742d2274e1653dfc76e00
        };
        Taro.setStorageSync("bookList", JSON.stringify(bookList));
      }
    },
    // 设置阅读时间缓存
    setReadTimeStorage() {
      let timeList = Taro.getStorageSync("timeList");
      let readTime = 0;
      if (timeList) {
        timeList = JSON.parse(timeList);
        if (timeList[this.bookContent.id]) {
          readTime =
            parseInt(
              new Date(this.readTimeEnd) - new Date(this.readTimeStart)
            ) /
              1000 +
            parseInt(timeList[this.bookContent.id].readTime);
        } else {
          readTime =
            parseInt(
              new Date(this.readTimeEnd) - new Date(this.readTimeStart)
            ) / 1000;
        }
      } else {
        timeList = {};
        readTime =
          parseInt(new Date(this.readTimeEnd) - new Date(this.readTimeStart)) /
          1000;
      }
      timeList[this.bookContent.id] = { readTime };
      Taro.setStorageSync("timeList", JSON.stringify(timeList));
    },
    // 获取书籍信息
    getBookInfo(id) {
      return new Promise((resolve, reject) => {
        getChapterDetail({ id }).then(res => {
          this.bookInfo = res.data;
          resolve("ok");
        });
      });
    },
    // 获取章节内容
    getReadContent(id, chapter_id) {
      return new Promise((resolve, reject) => {
        getRead({ id, chapter_id }).then(res => {
          if (res.code === 200) {
            this.show = false;
            this.bookContent = res.data;
            this.bookCurrentPage = chapter_id;
            this.offsetX -=
              (this.currentPaging - 1) * (this.clWidth - this.margin);
            this.styleObject = {
              transform: "translateX(" + this.offsetX + "px" + ")",
              transitionDuration: "0s"
            };
            resolve("ok");
          }
        });
      });
    },
    // 获取章节列表
    getChapterList(id) {
      return new Promise((resolve, reject) => {
        getChapterList({ id }).then(res => {
          this.chapterList = res.data.chapterList;
          this.chapterCount = res.data.chapterCount;
          this.getChapterPre();
          resolve("ok");
        });
      });
    },
    // 获取用户设置
    getUserLocalStorage() {
      try {
        let userSet = Taro.getStorageSync("userSet");
        if (userSet) {
          let userSetObj = JSON.parse(userSet);
          this.fontSize = userSetObj.fontSize;
          this.fontFamily = userSetObj.fontFamily;
          this.background = userSetObj.background;
          this.fontColor = userSetObj.color;
          this.readePattern = userSetObj.readePattern;
          this.pagingPattern = userSetObj.pagingPattern;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 缓存用户设置
    setUserLocalStorage() {
      let userSet = {
        fontSize: this.fontSize,
        fontFamily: this.fontFamily,
        background: this.background,
        color: this.fontColor,
        readePattern: this.readePattern,
        pagingPattern: this.pagingPattern
      };
      Taro.setStorageSync("userSet", JSON.stringify(userSet));
    },
    //获取是否为新用户，新用户的则需要引导页
    getNewUser() {
      try {
        let bootPage = Taro.getStorageSync("bootPage");
        if (bootPage) {
          this.bootPage = bootPage;
        } else {
          Taro.setStorageSync("bootPage", 0);
        }
      } catch (e) {
        console.log(e);
      }
    },
    //引导页
    setBootPage() {
      this.bootPage = 1;
      Taro.setStorageSync("bootPage", 1);
    },
    //翻页模式设置
    setPaging(num) {
      this.option = !this.option;
      this.pagingPattern = num;
      this.setUserLocalStorage();
      if (num === 1) {
        this.$nextTick(function() {
          let scrollW = this.$refs.bookInner.scrollWidth;
          let clientW = this.$refs.bookInner.clientWidth;
          this.resultPaging = Math.floor(scrollW / clientW);
        });
      }
    },
    //阅读模式设置
    setPattern(item, index) {
      this.option = true;
      this.readePattern = index;
      this.fontColor = item.color;
      this.background = item.background;
      this.setUserLocalStorage();
    },
    setFontFamily(item) {
      this.option = true;
      this.fontFamily = item;
      this.setUserLocalStorage();
    },
    //字体设置
    fontSet(str) {
      this.option = true;
      if (str === "reduce") {
        if (parseInt(this.fontSize) === 14) {
          return;
        } else {
          this.fontSize -= 0.8;
          this.setUserLocalStorage();
        }
      }
      if (str === "add") {
        if (parseInt(this.fontSize) === 22) {
          return;
        } else {
          this.fontSize += 0.8;
          this.setUserLocalStorage();
        }
      }
    },
    //切换目录
    selectChapter(chapter_id, id) {
      this.isClickPage = false;
      this.show = true;
      this.bookCurrentPage = chapter_id;
      this.currentPaging = 1;
      this.offsetX = 0;
      this.styleObject = {
        transform: "translateX(" + this.offsetX + "px" + ")",
        transitionDuration: "0s"
      };
      this.getReadContent(id, chapter_id).then(res => {
        if (res === "ok") {
          this.setBookShelfStorage();
          this.setBookInfoStorage();
          this.handleGetBookShelf();
        }
      });
    },

    setList() {
      this.listOption = !this.listOption;
      if (!this.option) {
        return;
      }
      this.option = !this.option;
    },
    setSetting() {
      this.setOption = !this.setOption;
      if (!this.option) {
        return;
      }
      this.option = !this.option;
    },
    setAutoRead(play) {
      // this.play = !play;
      // if (this.option) {
      //   this.option = !this.option;
      // }
      // if (!play) {
      //   window.clearInterval(this.autoRead);
      //   return;
      // }
      // let bookHeight = document.querySelector('html').scrollTop == 0 ? document.body.scrollHeight: document.body.scrollHeight - document.querySelector('html').scrollTop;
      // let screenHeight = window.screen.height;
      // this.autoRead = setInterval(() => {
      //   if (bookHeight < screenHeight) {
      //     setTimeout(() => {
      //       this.nextChapter();
      //       window.scrollTo(0, 0);
      //       this.setAutoRead(true);
      //     }, 500);
      //     window.scrollBy(0, bookHeight);
      //     window.clearInterval(this.autoRead);
      //   } else {
      //     bookHeight = bookHeight - screenHeight;
      //     window.scrollBy(0, screenHeight);
      //   }
      // }, 2000);
    },
    setReadShow() {
      this.option = !this.option;
    },
    //左右滑动
    setRead(e) {
      if (this.pagingPattern === 0) {
        this.option = !this.option;
        return;
      }
      let clWidth =
        document.documentElement.clientWidth || document.body.clientWidth;
      let currentX = e.pageX;
      let offsetX = clWidth / 3;

      if (currentX <= offsetX) {
        //用户点击左侧三分之一
        if (this.bookContent.last_chapterId == 0 && this.currentPaging === 1) {
          Taro.showToast({ title: "已经是第一章了!", icon: "none" });
          return;
        }
        if (this.currentPaging === 1) {
          //当前页为第一页的时候
          // this.show = true;
          this.isClickPage = true;
          this.prevChapter();
        } else {
          //当前页为其他页面的时候
          this.currentPaging--;
          this.offsetX += clWidth - this.margin;
          this.styleObject = {
            transform: "translateX(" + this.offsetX + "px" + ")",
            transitionDuration: "0.5s"
          };
        }
      } else if (offsetX <= currentX && currentX <= offsetX * 2) {
        //点击中间三分之一的时候
        this.option = !this.option;
      } else if (currentX >= offsetX * 2 && currentX <= clWidth) {
        //用户点击右侧三分之一
        this.isClickPage = false;
        if (this.bookContent.next_chapterId == 0) {
          Taro.showToast({ title: "已经是最后一章了!", icon: "none" });
          return;
        }
        //翻页
        this.currentPaging++;
        // if (this.resultPaging - this.currentPaging === 2) {
        //   //当前页为总页数的倒数第二页的时候加载下一章
        //   this.nextChapter();
        // }
        if (this.currentPaging === this.resultPaging + 1) {
          //当前页等于总页数的时候
          // this.show = true;
          // this.styleObject = "";
          // this.offsetX = 0;
          this.nextChapter();
          // this.currentPaging = 1;
        } else {
          //当前页不等于总页数的时候
          this.offsetX -= clWidth - this.margin;
          this.styleObject = {
            transform: "translateX(" + this.offsetX + "px" + ")",
            transitionDuration: "0.5s"
          };
        }
      }
    },
    //字符串解析
    bookChaptersBody(books) {
      if (books) {
        let c = /[\u4E00-\u9FA5\uF900-\uFA2D]/g;
        let _book = JSON.stringify(books).replace(/^"|"$/g, "");
        if (c.test(_book)) {
          _book =
            "<p>" +
            _book.replace(/\s*/g, "").replace(/\\n/g, "</p><p>") +
            "</p>";
          // 去除空行
          _book = _book.replace(/\<p\>\<br\>\<br\>\<\/p\>/g, "");
          _book = _book.replace(/\<p\>\<br\>\<\/p\>/g, "");
          return _book;
        } else {
          return "这一章消失了!";
        }
      }
    },
    //上下章节切换
    nextChapter() {
      if (this.bookCurrentPage == this.bookContent.next_chapterId) {
        Taro.showToast({ title: "已经是最后一章了!", icon: "none" });
        return;
      }
      this.show = true;
      this.bookCurrentPage = this.bookContent.next_chapterId;
      this.currentPaging = 1;
      this.offsetX = 0;
      // this.styleObject = "";
      this.getReadContent(
        this.bookContent.id,
        this.bookContent.next_chapterId
      ).then(res => {
        if (res === "ok") {
          this.setBookShelfStorage();
          this.setBookInfoStorage();
          this.handleGetBookShelf();
        }
      });
    },
    prevChapter() {
      if (this.bookContent.last_chapterId == 0) {
        Taro.showToast({ title: "已经是第一章了!", icon: "none" });
        return;
      }
      this.show = true;
      this.bookCurrentPage = this.bookContent.last_chapterId;
      this.currentPaging = 1;
      this.offsetX = 0;
      // this.styleObject = "";
      this.getReadContent(
        this.bookContent.id,
        this.bookContent.last_chapterId
      ).then(res => {
        if (res === "ok") {
          this.setBookShelfStorage();
          this.setBookInfoStorage();
          this.handleGetBookShelf();
        }
      });
    },
    //无限加载
    loadMore() {
      console.log(1)
      this.loading = true;
      if (this.bookCurrentPage == this.bookContent.next_chapterId) {
        return;
      }
      this.show = true;
      this.bookCurrentPage = this.bookContent.next_chapterId;
      setTimeout(() => {
        this.getReadContent(
          this.bookContent.id,
          this.bookContent.next_chapterId
        ).then(res => {
          if (res === "ok") {
            this.setBookShelfStorage();
            this.setBookInfoStorage();
            this.handleGetBookShelf();
          }
        });
        this.loading = false;
        this.show = false;
      }, 1000);
    },
    // 返回
    handleBackTo() {
      Taro.navigateBack();
    },
    // 查询书架缓存
    handleGetBookShelf() {
      try {
        let bookShelf = Taro.getStorageSync("bookShelf");
        if (bookShelf) {
          let _bookShelf = JSON.parse(bookShelf);
          if (_bookShelf[[this.bookContent.id]]) {
            this.flag = true;
          }
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 加入/撤出书架
    handleAddBookShelf() {
      if (this.flag) {
        let bookShelf = Taro.getStorageSync("bookShelf");
        if (bookShelf) {
          let _bookShelf = JSON.parse(bookShelf);
          if (_bookShelf[this.bookContent.id]) {
            delete _bookShelf[this.bookContent.id];
            Taro.setStorageSync("bookShelf", JSON.stringify(_bookShelf));
            this.flag = false;
            Taro.showToast({ title: "成功撤出书架", icon: "none" });
          }
        }
      } else {
        let bookShelf = Taro.getStorageSync("bookShelf");
        if (bookShelf) {
          let _bookShelf = JSON.parse(bookShelf);
          _bookShelf[this.bookContent.id] = {
            id: this.bookContent.id,
            index: this.bookContent.index,
            chapterCount: this.chapterCount,
            chapter_id: this.bookCurrentPage,
            name: this.bookContent.name,
            type: this.bookInfo.type,
            writer: this.bookInfo.writer,
<<<<<<< HEAD
            is_over: this.bookInfo.is_over
=======
            is_over: this.bookInfo.is_over,
            image:this.bookInfo.image
>>>>>>> 9e77b3e0a594db1f1ce742d2274e1653dfc76e00
          };
          Taro.setStorageSync("bookShelf", JSON.stringify(_bookShelf));
        } else {
          let _bookShelf = {};
          _bookShelf[this.bookContent.id] = {
            id: this.bookContent.id,
            index: this.bookContent.index,
            chapterCount: this.chapterCount,
            chapter_id: this.bookCurrentPage,
            name: this.bookContent.name,
            type: this.bookInfo.type,
            writer: this.bookInfo.writer,
<<<<<<< HEAD
            is_over: this.bookInfo.is_over
=======
            is_over: this.bookInfo.is_over,
            image:this.bookInfo.image
>>>>>>> 9e77b3e0a594db1f1ce742d2274e1653dfc76e00
          };
          Taro.setStorageSync("bookShelf", JSON.stringify(_bookShelf));
        }
        this.flag = true;
        Taro.showToast({ title: "成功加入书架", icon: "none" });
      }
    },
    // 设置书架缓存
    setBookShelfStorage() {
      let bookShelf = Taro.getStorageSync("bookShelf");
      if (this.flag && bookShelf) {
        let _bookShelf = JSON.parse(bookShelf);
        _bookShelf[this.bookContent.id] = {
          id: this.bookContent.id,
          index: this.bookContent.index,
          chapterCount: this.chapterCount,
          chapter_id: this.bookCurrentPage,
          name: this.bookContent.name,
          type: this.bookInfo.type,
          writer: this.bookInfo.writer,
<<<<<<< HEAD
          is_over: this.bookInfo.is_over
=======
          is_over: this.bookInfo.is_over,
          image:this.bookInfo.image
>>>>>>> 9e77b3e0a594db1f1ce742d2274e1653dfc76e00
        };
        Taro.setStorageSync("bookShelf", JSON.stringify(_bookShelf));
      }
    },
    handleInputChapterIndex(val) {
      this.currentChapter = this.chapterList[
        Math.floor((this.chapterCount - 1) * (val / 100))
      ];
    },
    getChapterPre() {
      this.chapterPer = Math.floor(
        (this.bookContent.index / (this.chapterCount - 1)) * 100
      );
    },
    handleToChapter(id, chapter_id) {
      this.show = true;
      this.getReadContent(id, chapter_id).then(res => {
        if (res === "ok") {
          this.setBookShelfStorage();
          this.setBookInfoStorage();
          this.handleGetBookShelf();
          this.currentChapter = {};
          this.show = false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.book {
  background: #eee6dd;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  margin-top: -1px;
  position: relative;

  .bootPage {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    background: rgba(50, 51, 52, 0.9);
    z-index: 10000;
    display: flex;
    max-width: 750px;

    .b-item {
      width: 33.3333333%;

      .center {
        padding: 20px;
        line-height: 100vh;
        width: 100%;
        font-size: 25px;
        color: #d0d0d0;
        box-sizing: border-box;
      }
    }

    .bootPage-center {
      border-left: 1px solid #5c5c5c;
      border-right: 1px solid #5c5c5c;
    }
  }

  .books-con {
    width: 100%;

    .book-content {
      padding: 50px 10px 0px 10px; /* no */

      .book-inner {
        text-align: justify;
        line-height: 60px; /* no */
        text-indent: 2em;
      }

      .book-title {
        line-height: 50px;
        font-weight: 400;
        margin-bottom: 25px;
      }
    }
  }

  .loadMore {
    height: 80px;
    line-height: 80px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  .read-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .read-article {
      position: absolute;
      overflow: hidden;
      padding: 0 10Px; /* no */
      text-align: justify;
      bottom: 20px; /* no */
      top: 60px; /* no */

      .read-section {
        height: 100%;

        .read-section-inner {
          overflow: visible;
          height: 100%;

          .book-inner {
            line-height: 60px; /* no */
            text-indent: 2em;
          }
        }

        .book-title {
          line-height: 50px;
          font-weight: 400;
          margin-bottom: 25px;
        }
      }
    }

    .article-page {
      color: #585858;
      font-size: 13px;
      position: absolute;
      left: 10px;
      bottom: 10px;
    }
  }
}

.page-read-option {
  position: fixed;
  z-index: 888;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;

  .book-header {
    line-height: 80px;
    height: 80px;
    background-color: rgba(50, 51, 52, 0.9);
  }

  .bottom-controll-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0;

    .mint-button {
      width: 33.33333%;
      line-height: 80px;
      height: 80px;
      color: #fff;
      background: rgba(50, 51, 52, 0.9);
      border-radius: 0;
      font-size: 28px;
    }

    .add_my {
      position: absolute;
      bottom: 200px;
      right: 0;
      width: 150px;
      height: 60px;
      line-height: 60px;
      border-radius: 50px 0 0 50px;
    }
  }

  .addReader {
    width: 25%;
    position: absolute;
    line-height: 60px;
    height: 60px;
    background: rgba(50, 51, 52, 0.9);
    color: #fff;
    text-align: center;
    border-radius: 10px;
    right: 0;
    top: 100px;
  }
}

.readSet {
  width: 100%;
  font-size: 28px;
  padding: 20px 40px;
  box-sizing: border-box;

  .readSet-item {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      text-align: center;
      display: inline-block;
      line-height: 60px;
      width: 200px;
      border-radius: 20px;
      border: 1px solid #535353;

      &.active {
        border: 1px solid #409eff;
      }
    }
    .pattern-item {
      height: 60px;
      width: 60px;
      border-radius: 60px;
      border: none;
    }
  }

  .pattern {
    span:nth-of-type(2) {
      margin: 0 10px;
    }
  }
}

.show-panel {
  visibility: visible;
}

.chapter-list {
  // position: fixed;
  // z-index: 999;
  // left: 0;
  // top: 0;
  // bottom: 0;
  // width: 100%;
  // height: 100%;
  // background: transparent;

  .list-content {
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;

    .top-bar {
      position: absolute;
      width: 100%;
      height: 120px;
      line-height: 120px;
      font-size: 25px;
      font-weight: 600;
      padding-left: 20px;
      border-bottom: 1px solid #ebebeb;
      box-sizing: border-box;
      z-index: 100;
      background: #fff;
    }

    .chapter-con {
      position: absolute;
      top: 0;
      width: 100%;
      height: 90vh;
      margin-top: 120px;
      padding-left: 20px;
      box-sizing: border-box;
      overflow-y: scroll;

      .chapterList {
        width: 100%;

        div {
          line-height: 80px;
          height: 80px;
          font-size: 23px;
          color: #999;
          border-bottom: 1px solid #ebebeb;

          &.current {
            color: #409eff;
          }
        }
      }
    }
  }
}

.right {
  width: 100%;
  height: 80px;
  text-align: right;
}

.changeSource {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: rgba(50, 51, 52, 0.8);

  .source-content {
    width: 500px;
    height: 800px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -400px;
    border-radius: 15px;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: scroll;

    .source-item {
      line-height: 50px;
      font-size: 25px;
      position: relative;

      .center {
        width: 80%;
        font-size: 20px;
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .select {
        position: absolute;
        right: 0;
        top: 20px;
        background: #c9c9c9;
        padding: 0 10px;
        border-radius: 15px;
        display: none;
        color: #fff;
        font-size: 18px;
      }

      .active {
        display: block;
      }
    }
  }
}

.change_source_btn {
  width: 200px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -80px;
  margin-left: -100px;
  z-index: 1000;

  .source_btn {
    width: 100%;
    height: 100%;
    font-size: 25px;
  }
}

.van-button--normal {
  background: rgba(50, 51, 52, 0.9);
  color: white;
  border: none;
  border-radius: 0;
}

.chapter-change {
  display: flex;
  align-items: center;
}
.chapter-change span {
  font-size: 24px;
  width: 40%;
  text-align: center;
}
.chapter-button {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
.chapter-button div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.chapter-button div span {
  font-size: 16px;
}
.current-chapter {
  position: fixed;
  bottom: 20%;
  left: 0;
  width: 80%;
  background: white;
  font-size: 28px;
  padding: 16px 26px;
  margin: 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 50px;
}
</style>
